<!DOCTYPE html>
<!--[if lte IE 8]>
<html class="lt-ie9  no-js" lang="en">
      <![endif]-->
      <!--[if gt IE 8]>
      <!-->
      <html lang="en" >
            <!--<![endif]-->
<head>
            <meta charset="utf-8"/>
            <meta name="renderer" content="webkit">
            <meta http-equiv="X-UA-Compatible" content="chrome=1,IE=edge"/>
            <title>Styles</title>
            <meta name="description" content=""/>
            <link rel="stylesheet" href="/styles/main.css" />
            <!--[if lt IE 9]>
            <script type="text/javascript" src="/bower_components/lt-ie-9/lt-ie-9.min.js"></script>
            <![endif]-->
</head>
<body style="background-color:white">
            <h2>用户信息</h2>
            <hr />
            <img src="/images/test-user-icon.jpg" alt="用户头像" width="60px" height="60px" />
            <img src="/images/test-user-icon.jpg" alt="用户头像" width="50px" height="50px" />
            <img src="/images/test-user-icon.jpg" alt="用户头像" width="40px" height="40px" />
            <img src="/images/test-user-icon.jpg" alt="用户头像" width="35px" height="35px" />
            <br />
            <img src="/images/test-user-icon.jpg" alt="用户头像" class="circle-img" width="60px" height="60px" />
            <img src="/images/test-user-icon.jpg" alt="用户头像" class="circle-img" width="50px" height="50px" />
            <img src="/images/test-user-icon.jpg" alt="用户头像" class="circle-img" width="40px" height="40px" />
            <img src="/images/test-user-icon.jpg" alt="用户头像" class="circle-img" width="35px" height="35px" />

            <br />

            <div class="do-box-user">
                  <div class="do-box-userinfo">
                        <div class="do-box-user-icon">
                              <img src="/images/test-user-icon.jpg" alt="用户头像" class="circle-img" width="40px" height="40px" />
                        </div>
                        <div class="do-box-user-name">张小胡</div>
                  </div>
                  <div class="icon-line" ></div>
                  <div class="do-box-user-status">
                        <div class="do-box-user-table">
                              <p class="do-box-user-number">99+</p>
                              <p class="do-box-user-detail">待解决</p>
                        </div>
                        <div class="do-box-user-table">
                              <p class="do-box-user-number">99+</p>
                              <p class="do-box-user-detail">解决中</p>
                        </div>
                  </div>
            </div>

            <p>状态选择</p>

            <div class="do-user-status-select">
                  <a href="javascript:;" class="do-user-status-toggle"><span class="do-icon-msg do-user-status-open"></span> 开始接诊 <i class="fa fa-sort-down"></i></a>
                  <a href="javascript:;" class="do-user-status-toggle"><span class="do-icon-msg-down do-user-status-close"></span> 停止诊室 <i class="fa fa-sort-down"></i></a>
                  <ul class="do-user-status-dropmenu">
                        <li><span class="do-icon-msg do-user-status-open"></span> 开始接诊</li>  
                        <li><span class="do-icon-msg-down do-user-status-close"></span> 停止诊室</li>
                  </ul>
            </div>


            <h2>TOP</h2>
            <hr />
            <div class="do-nav"></div>
            <br />

            <h2>面板</h2>
            <hr />
            <br />
            <div class="do-panel">
                  <div class="do-panel-head">
                        <p class="do-panel-title">病情备注</p>
                        <div class="do-panel-tools">
                              <a href="" class="do-btn do-btn-default">+ 测试</a>
                        </div>
                  </div>
                  <div class="do-panel-body"></div>
            </div>

            <br />
            <div class="do-open-panel">
                  <div class="do-open-panel-head">
                        <a class="do-head-title" href="#"> <i class="do-icon-conf"></i>
                              关闭
                        </a>
                        <a class="do-head-title" href="javascripts:;"> <i class="do-icon-conf"></i>
                              设置
                        </a>
                  </div>
                  <div class="do-open-panel-body">
                        <ul class="do-nav-list-tabs">
                              <li >
                                    <a href="">话术一</a>
                              </li>
                              <li>
                                    <a href="">话术二</a>
                              </li>
                              <li>
                                    <a href="">话术三</a>
                              </li>
                        </ul>
                        <ul class="do-nav-list-slide">
                              <li>
                                    <a href="">l</a>
                              </li>
                              <li>
                                    <a href="">r</a>
                              </li>
                        </ul>
                        <div class="do-open-panel-content">
                              <a href="javascript:;">您没有添加过话术</a>
                        </div>
                  </div>
            </div>

            <br>

            <h2>内容模块</h2>
            <hr />
            <br />
            <p>问题列表</p>
            <ul class="do-chatlist">
                  <li class="do-chatlist-item">
                        <img src="/images/test-user-icon.jpg" alt="用户头像" class="pho-img" />
                        <div class="do-user-info">
                              <ul class="do-user-name">
                                    <li >张三三</li>
                                    <li>(这是什么)</li>
                                    <li>33岁</li>
                                    <li>辣妈</li>
                              </ul>
                              <span class="do-user-msg">怀孕三个月，最近几天浑身没劲，身体就像灌了铅一样，而且容易出汗，胃口也不好，吃不下饭，请问我这到底是什么原因</span>
                              <span class="do-user-msg-img">
                                    <img src="/images/text-user-bchao.jpg" alt="B 超图"  />
                                    <img src="/images/text-user-bchao.jpg" alt="B 超图"  />
                                    <img src="/images/text-user-bchao.jpg" alt="B 超图"  />
                              </span>
                        </div>
                        <div class="do-list-tool">
                                    <ul class="do-info-detail">
                                          <li >2012-11-11 19:33</li>
                                          <li>儿科</li>
                                          <li>孕6周2天</li>
                                    </ul>
                                    <ul class="do-detail-util">
                                          <li><a href="javascript:;">举报</a></li>
                                          <li><input type="button" class="do-btn do-btn-success do-btn-md" value="抢答"></li>
                                    </ul>
                        </div>
                  </li>
            </ul>
            <br>
            <p>聊天对话模块</p>
            <ul class="chats">
                  <li class="in">
                        <img src="/images/test-user-icon.jpg" alt="用户头像" class="circle-img avatar" width="40px" height="40px" />
                        <div class="message">
                              <span class="arrow"></span>
                              <span href="#" class="name">小倩倩倩倩（倩倩倩）</span>
                              <span class="body">怀孕三个月，最近几天浑身没劲，身体就像灌了铅一样，而且容易出汗，胃口也不好，吃不下饭，请问我这到底是什么原因?</span>
                              <span class="body-img">
                                    <img src="/images/text-user-bchao.jpg" alt="B 超图" width="80px" height="80px">
                                    <img src="/images/text-user-bchao.jpg" alt="B 超图" width="80px" height="80px">
                                    <img src="/images/text-user-bchao.jpg" alt="B 超图" width="80px" height="80px"></span>
                              <span class="datetime">2015-4-20 18:07:55</span>
                        </div>
                  </li>
                  <li class="out">
                        <img src="/images/test-user-icon.jpg" alt="用户头像" class="circle-img avatar" width="40px" height="40px" />
                        <div class="message">
                              <span class="arrow"></span>
                              <span class="body">怀孕三个月，最近几天浑身没劲，身体就像灌了铅一样，而且容易出汗，胃口也不好，吃不下饭，请问我这到底是什么原因?</span>
                              <span class="datetime">2015-4-20 18:07:55</span>
                        </div>
                  </li>
                  <li class="in">
                        <img src="/images/test-user-icon.jpg" alt="用户头像" class="circle-img avatar" width="40px" height="40px" />
                        <div class="message">
                              <span class="arrow"></span>
                              <span href="#" class="name">小倩倩倩倩（倩倩倩）</span>
                              <span class="body">怀孕三个月，最近几天浑身没劲，身体就像灌了铅一样，而且容易出汗，胃口也不好，吃不下饭，请问我这到底是什么原因?</span>
                              <span class="datetime">2015-4-20 18:07:55</span>
                        </div>
                  </li>
                  <li class="out">
                        <img src="/images/test-user-icon.jpg" alt="用户头像" class="circle-img avatar" width="40px" height="40px" />
                        <div class="message">
                              <span class="arrow"></span>
                              <span class="body">怀孕三个月，最近几天浑身没劲，身体就像灌了铅一样，而且容易出汗，胃口也不好，吃不下饭，请问我这到底是什么原因?</span>
                              <span class="datetime">2015-4-20 18:07:55</span>
                        </div>
                  </li>
                  <li class="in">
                        <img src="/images/test-user-icon.jpg" alt="用户头像" class="circle-img avatar" width="40px" height="40px" />
                        <div class="message">
                              <span class="arrow"></span>
                              <span href="#" class="name">小倩倩倩倩（倩倩倩）</span>
                              <span class="body">怀孕三个月，最近几天浑身没劲，身体就像灌了铅一样，而且容易出汗，胃口也不好，吃不下饭，请问我这到底是什么原因?</span>
                              <span class="datetime">2015-4-20 18:07:55</span>
                        </div>
                  </li>
                  <li class="out">
                        <img src="/images/test-user-icon.jpg" alt="用户头像" class="circle-img avatar" width="40px" height="40px" />
                        <div class="message">
                              <span class="arrow"></span>
                              <span class="body">怀孕三个月，最近几天浑身没劲，身体就像灌了铅一样，而且容易出汗，胃口也不好，吃不下饭，请问我这到底是什么原因?</span>
                              <span class="datetime">2015-4-20 18:07:55</span>
                        </div>
                  </li>

            </ul>

            <br />

            

            <p>病情备注内容样式</p>
            <br />

            <ul class="do-items">
                  <li>
                        <div>
                              <p>怀孕三个月，最近几天浑身没劲，身体就像灌了铅一样，而且容易出汗，胃口也不好，吃不下饭，请问我这到底是什么原因?</p>
                        </div>
                        <div class="do-items-imgs">
                              <img src="/images/text-user-bchao.jpg" alt="B 超图" width="60px" height="60px">
                              <img src="/images/text-user-bchao.jpg" alt="B 超图" width="60px" height="60px">
                              <img src="/images/text-user-bchao.jpg" alt="B 超图" width="60px" height="60px"></div>
                        <span class=".do-items-time">2015-4-20 18:07:55</span>
                        <div class="icon-line" ></div>
                  </li>
                  <li>
                        <div>
                              <p>怀孕三个月，最近几天浑身没劲，身体就像灌了铅一样，而且容易出汗，胃口也不好，吃不下饭，请问我这到底是什么原因?</p>
                        </div>
                        <span class="datetime">2015-4-20 18:07:55</span>
                  </li>
                  <li>
                        <div>
                              <p>怀孕三个月，最近几天浑身没劲，身体就像灌了铅一样，而且容易出汗，胃口也不好，吃不下饭，请问我这到底是什么原因?</p>
                        </div>
                        <span class="datetime">2015-4-20 18:07:55</span>
                  </li>
                  <li>
                        <div>
                              <p>怀孕三个月，最近几天浑身没劲，身体就像灌了铅一样，而且容易出汗，胃口也不好，吃不下饭，请问我这到底是什么原因?</p>
                        </div>
                        <span class="datetime">2015-4-20 18:07:55</span>
                  </li>
            </ul>
      
            <h2>退款消息提示框</h2>
            <hr />
            <div class="do-panel-refund">
                  <ul class="do-refund-info">
                        <li><span class="do-refund-title">申请退款时间:</span>2011-11-11 14:22</li>
                        <li><span class="do-refund-title">退款金额:</span>100.00元</li>
                        <li><span class="do-refund-title">退款原因:</span>我在逗你玩呢，我要退钱</li>
                  </ul>
                  <p class="do-refund-error">自动同意退款时间:2012-11-11 13:44</p>
                  <ul class="do-refun-tool">
                        <li>
                              <input type="button" class="do-btn do-btn-default do-btn-md do-refund-btn" value="拒绝退款">
                        </li>
                        <li>
                              <input type="button" class="do-btn do-btn-default do-btn-md do-refund-btn" value="同意退款">
                        </li>
                  </ul>
            </div>
            
            <h2>弹出面板－用户信息</h2>
            <hr />
            <div class="do-panel-userinfo">
                  <img src="/images/test-user-icon.jpg"  class="do-user-img" />
                  <div class="do-user-detail">
                        <ul class="do-user-list">
                              <li class="do-user-name">张三三</li>
                              <li class="do-user-message">怀孕三个月，最近几天浑身没劲，身体就像灌了铅一样，而且容易出汗，胃口也不好，吃不下饭，请问我这到底是什么原因</li>
                              <li class="do-user-sendtime">2014-09-12  14:11</li>
                        </ul>
                  </div>
            </div>
            
            <br>
            <h2>导航</h2>
            <hr />

            <ul class="do-nav-stacked">
                  <li class="active">
                        <a href="#">
                              我的问题
                              <span class="do-nav-icon">
                                    <i class="fa fa-angle-right"></i>
                              </span>
                        </a>
                  </li>
                  <li>
                        <a href="#">
                              问题大厅
                              <span class="do-nav-icon">
                                    <i class="fa fa-angle-right"></i>
                              </span>
                        </a>
                  </li>
                  <li>
                        <a href="#">
                              用户管理
                              <span class="do-nav-icon">
                                    <i class="fa fa-angle-right"></i>
                              </span>
                        </a>
                  </li>
                  <li>
                        <a href="#">
                              数据统计
                              <span class="do-nav-icon">
                                    <i class="fa fa-angle-right"></i>
                              </span>
                        </a>
                  </li>
                  <li>
                        <a href="#">
                              学习园地
                              <span class="do-nav-icon">
                                    <i class="fa fa-angle-right"></i>
                              </span>
                        </a>
                  </li>
                  <li>
                        <a href="#">
                              个人中心
                              <span class="do-nav-icon">
                                    <i class="fa fa-angle-right"></i>
                              </span>
                        </a>
                  </li>
            </ul>

            <h2>按钮</h2>
            <hr />
            <p>
                  默认样式
                  <input type="button" class="do-btn do-btn-default" value="确定">
                  <a href="" class="do-btn do-btn-default">取消</a>
            </p>
            <p>
                  默认成功
                  <input type="button" class="do-btn do-btn-primary" value="确定">
                  <a href="" class="do-btn do-btn-primary">取消</a>
            </p>
            <p>
                  默认样式
                  <input type="button" class="do-btn do-btn-success" value="确定">
                  <a href="" class="do-btn do-btn-success">取消</a>
            </p>
            <br />
            <p>
                  默认样式
                  <input type="button" class="do-btn do-btn-default do-btn-sm" value="确定">
                  <a href="" class="do-btn do-btn-default do-btn-sm">取消</a>
            </p>
            <p>
                  默认成功
                  <input type="button" class="do-btn do-btn-primary do-btn-sm" value="确定">
                  <a href="" class="do-btn do-btn-primary do-btn-sm">取消</a>
            </p>
            <p>
                  默认样式
                  <input type="button" class="do-btn do-btn-success do-btn-sm" value="确定">
                  <a href="" class="do-btn do-btn-success do-btn-sm">取消</a>
            </p>
            <p>
                  默认样式
                  <input type="button" class="do-btn do-btn-info do-btn-sm" value="确定">
                  <a href="" class="do-btn do-btn-info do-btn-sm">取消</a>
            </p>
            <br />
            <p>
                  默认样式
                  <input type="button" class="do-btn do-btn-default do-btn-md" value="确定">
                  <a href="" class="do-btn do-btn-default do-btn-md">取消</a>
            </p>
            <p>
                  默认成功
                  <input type="button" class="do-btn do-btn-primary do-btn-md" value="确定">
                  <a href="" class="do-btn do-btn-primary do-btn-md">取消</a>
            </p>
            <p>
                  默认样式
                  <input type="button" class="do-btn do-btn-success do-btn-md" value="确定">
                  <a href="" class="do-btn do-btn-success do-btn-md">取消</a>
            </p>
            <p>
                  默认样式
                  <input type="button" class="do-btn do-btn-info do-btn-md" value="确定">
                  <a href="" class="do-btn do-btn-info do-btn-md">取消</a>
            </p>
            <br />
            <p>整行的button</p>
            <a href="javascript:;" class="do-btn do-btn-block">
                  <i class="fa fa-plus"></i>
                  添加该分类下的话术
            </a>

            <br>
            <h2>tab</h2>
            <hr />

            <p>样式一</p>
            <ul class="do-nav-tab">
                  <li class="active">
                        <a href="">
                              待解决
                              <span class="arrow">
                                    <i class="fa fa-caret-up"></i>
                              </span>
                        </a>
                  </li>
                  <li>
                        <a href="" class="">
                              解决中
                              <span class="arrow">
                                    <i class="fa fa-caret-up"></i>
                              </span>
                        </a>
                  </li>
                  <li>
                        <a href="">
                              已解决
                              <span class="arrow">
                                    <i class="fa fa-caret-up"></i>
                              </span>
                        </a>
                  </li>
            </ul>

            <p>样式二</p>
            <ul class="do-nav-tab-pretty">
                  <li>
                        <a href="">每日记录</a>
                  </li>
                  <li class="active">
                        <a href="">病情备注</a>
                  </li>
                  <li>
                        <a href="">提问历史</a>
                  </li>
            </ul>

            <p>样式三</p>
            <ul class="do-nav-tab-smile">
                  <li>
                        <a href="">胎动</a>
                  </li>
                  <li>
                        <a href="">体重</a>
                  </li>
                  <li>
                        <a href="">肚维</a>
                  </li>
                  <li>
                        <a href="">症状</a>
                  </li>
                  <li>
                        <a href="">体温</a>
                  </li>
            </ul>

            <p>样式四</p>
            <ul class="do-nav-list">
                  <li>
                        <a href="javascript:;">全部</a>
                  </li>
                  <li>
                        <a href="">儿科</a>
                  </li>
                  <li>
                        <a href="">妇产科</a>
                  </li>
                  <li>
                        <a href="">其他</a>
                  </li>
            </ul>

            <p>样式五</p>

            <ul class="do-nav-list-live">
                  <li>
                        <a href="javascript:;">全部</a>
                  </li>
                  <li>
                        <a href="">问我的</a>
                  </li>
                  <li>
                        <a href="">问他人的</a>
                  </li>
            </ul>

            <p>样式六</p>

            <ul class="do-nav-list-square">
                  <li>
                        <a href="">分类</a>
                  </li>
                  <li class="active">
                        <a href="">话术一</a>
                  </li>
                  <li>
                        <a href="">话术二</a>
                  </li>
                  <li>
                        <a href="">话术三</a>
                  </li>
            </ul>

            <h2>文本框</h2>
            <hr />

            <p>默认文本框样式1</p>
            <form action="" class="do-form">
                  <textarea cols="50" rows="4" width="50%"></textarea>
            </form>
            <br />
            <p>默认文本框不可编辑模式</p>
            <form action="#" class="do-form">
                  <textarea cols="50" rows="4" width="50%" disabled></textarea>
            </form>

            <br />

            <p>单选框</p>
            <hr />

            <div>
                  <input type="radio" id="demo1" name="sex" checked />
                  <label for="demo1" class="do-radio">男生</label>
            </div>

            <div>
                  <input type="radio" id="demo2" name="sex" />
                  <label for="demo2" class="do-radio">女生</label>
            </div>

            <div>
                  <input type="radio" id="demo3" name="sex" disabled />
                  <label for="demo3" class="do-radio">这个是禁止状态</label>
            </div>

            <br />

            <p>复选框</p>
            <hr />
            <div class="do-checkbox">
                  <input type="checkbox" value="None" id="squaredThree" name="check" checked />
                  <label  class="do-lab" for="squaredThree">全部</label>
            </div>
            <br />

            <h2>表单</h2>
            <hr />
            <div class="do-form-group">
                  <label class="do-control-label" for="exampleInputEmail1">Email address</label>
                  <input type="email" class="do-input" id="exampleInputEmail1" placeholder="Enter email"></div>
            <div class="do-form-group">
                  <label class="do-control-label" for="name">姓名:</label>
                  <input type="text" class="do-input" class="do-input" placeholder="请输入..." id="name"></div>

            <div class="do-form-group">
                  <label class="do-control-label" for="phone">手机号:</label>
                  <input type="text" class="do-input" placeholder="请输入..." id="phone"></div>

            <div class="do-form-group">
                  <label class="do-control-label" for="sex">性别:</label>
                  <input type="text" class="do-input" placeholder="请输入..." id="sex"></div>

            <div>
                  <label for="service">服务期限:</label>
                  <select name="" id="">
                        <option value="">选项A</option>
                        <option value="">选项A</option>
                        <option value="">选项A</option>
                  </select>
            </div>
            <br>

            <h2>消息面板</h2>
            <hr />
            <div class="do-panel-msg">
                  <div class="do-panel-msg-body">
                        <form action="" class="do-form">
                              <textarea  rows="2" width="100%" placeholder="请输入..."></textarea>
                        </form>
                  </div>
                  <div class="do-panel-msg-footer">
                        <ul class="do-msg-tool">
                              <li>
                                    <a class="do-msg-tool-img" href="javascript:;">
                                          <i></i>
                                          图片
                                    </a>
                              </li>
                              <li>
                                    <a class="do-msg-tool-talk" href="javascript:;">
                                          <i></i>
                                          话术
                                    </a>
                              </li>
                        </ul>
                        <input type="button" class="do-btn do-btn-success do-btn-md  do-msg-send" value="确定"></div>
            </div>
            <br>

            <h2>搜索</h2>
            <hr />
            <div>
                  <div class="do-search">
                        <input type="text" class="do-search-input" placeholder="搜索内容" >
                        <button class="do-search-btn">搜索</button>
                  </div>
            </div>

            <h2>提示框</h2>
            <hr />

            <p>样式1</p>
            <div class="do-box-msg">
                  <div class="do-box-msg-body">
                        <p class="do-box-msg-text">确认要删除该条病情备注吗,确认要删除该条病情备注吗?</p>
                  </div>
                  <div class="do-box-footer">
                        <input type="button" class="do-btn do-btn-success do-btn-sm" value="确定">
                        <input type="button" class="do-btn do-btn-default do-btn-sm" value="取消"></div>
            </div>

            <p>样式2</p>
            <div class="do-box-alert">
                  <div class="do-box-alert-content">
                        <div class="do-box-alert-img icon-del" ></div>
                        删除失败
                  </div>
            </div>
            <br />
            <div class="do-box-alert">
                  <div class="do-box-alert-content">
                        <div class="do-box-alert-img icon-del" ></div>
                        删除成功
                  </div>
            </div>

            <p>提示框样式3</p>

            <a href="" class="do-box-notify">
                  有
                  <span class="do-box-notify-hot">20条</span>
                  新问题，点击查看
            </a>

            <h2>表格</h2>
            <hr />
            <p>表格1</p>
            <table class="do-table">
                  <thead>
                        <tr>
                              <th>流水号</th>
                              <th>日期</th>
                              <th>税前收入 ( 元 )</th>
                              <th>税款 ( 元 )</th>
                              <th>汇款金额 ( 元 )</th>
                        </tr>
                  </thead>
                  <tbody>
                        <tr>
                              <td>201514250001</td>
                              <td>2015-02-05</td>
                              <td>10.00</td>
                              <td>10.00</td>
                              <td>10000.00</td>
                        </tr>
                        <tr class="do-table-odd">
                              <td>201514250001</td>
                              <td>2015-02-05</td>
                              <td>10.00</td>
                              <td>10.00</td>
                              <td>10000.00</td>
                        </tr>
                        <tr>
                              <td>201514250001</td>
                              <td>2015-02-05</td>
                              <td>10.00</td>
                              <td>10.00</td>
                              <td>10000.00</td>
                        </tr>
                        <tr class="do-table-odd">
                              <td>201514250001</td>
                              <td>2015-02-05</td>
                              <td>10.00</td>
                              <td>10.00</td>
                              <td>10000.00</td>
                        </tr>
                        <tr>
                              <td>201514250001</td>
                              <td>2015-02-05</td>
                              <td>10.00</td>
                              <td>10.00</td>
                              <td>10000.00</td>
                        </tr>
                  </tbody>
            </table>

            <br />

            <p>表格2</p>
            <table class="do-table">
                  <thead>
                        <tr>
                              <th>选择</th>
                              <th>用户昵称</th>
                              <th>备注</th>
                              <th>年龄</th>
                              <th>用户状态</th>
                              <th>用户分组</th>
                              <th>操作</th>
                        </tr>
                  </thead>
                  <tbody>
                        <tr>
                              <td>
                                    <input type="checkbox"></td>
                              <td>小倩倩</td>
                              <td>张倩倩</td>
                              <td>28岁</td>
                              <td>备孕分子</td>
                              <td>未分组</td>
                              <td>退单</td>
                        </tr>
                        <tr class="do-table-odd">
                              <td>
                                    <input type="checkbox"></td>
                              <td>小倩倩</td>
                              <td>张倩倩</td>
                              <td>28岁</td>
                              <td>备孕分子</td>
                              <td>未分组</td>
                              <td>退单</td>
                        </tr>
                        <tr>
                              <td>
                                    <input type="checkbox"></td>
                              <td>小倩倩</td>
                              <td>张倩倩</td>
                              <td>28岁</td>
                              <td>备孕分子</td>
                              <td>未分组</td>
                              <td>退单</td>
                        </tr>
                        <tr class="do-table-odd">
                              <td>
                                    <input type="checkbox"></td>
                              <td>小倩倩</td>
                              <td>张倩倩</td>
                              <td>28岁</td>
                              <td>备孕分子</td>
                              <td>未分组</td>
                              <td>退单</td>
                        </tr>
                        <tr>
                              <td>
                                    <input type="checkbox"></td>
                              <td>小倩倩</td>
                              <td>张倩倩</td>
                              <td>28岁</td>
                              <td>备孕分子</td>
                              <td>未分组</td>
                              <td>退单</td>
                        </tr>
                  </tbody>
            </table>

            <br />

            <p>表格3</p>
            <table class="do-table">
                  <thead>
                        <tr>
                              <th colspan="6" class="do-table-head">选择</th>
                        </tr>
                  </thead>
                  <tbody>
                        <tr>
                              <td>
                                    <div class="do-table-box">
                                          <p class="do-table-box-title">登录次数</p>
                                          <span class="do-table-box-caption">20次</span>
                                    </div>
                              </td>
                              <td>
                                    <div class="do-table-box">
                                          <p class="do-table-box-title">登录次数</p>
                                          <span class="do-table-box-caption">20次</span>
                                    </div>
                              </td>
                              <td>
                                    <div class="do-table-box">
                                          <p class="do-table-box-title">登录次数</p>
                                          <span class="do-table-box-caption">20次</span>
                                    </div>
                              </td>
                        </tr>
                        <tr class="do-table-odd">
                              <td>
                                    <div class="do-table-box">
                                          <p class="do-table-box-title">登录次数</p>
                                          <span class="do-table-box-caption">20次</span>
                                    </div>
                              </td>
                               <td>
                                    <div class="do-table-box">
                                          <p class="do-table-box-title">登录次数</p>
                                          <span class="do-table-box-caption">20次</span>
                                    </div>
                              </td>
                              <td>
                                    <div class="do-table-box">
                                          <p class="do-table-box-title">登录次数</p>
                                          <span class="do-table-box-caption">20次</span>
                                    </div>
                              </td>
                        </tr>
                  </tbody>
            </table>

            <br />

            <p>表格4</p>
            <table class="do-table-gray">
                  <thead>
                        <tr>
                              <th  class="do-table-head-first">分类名</th>
                              <th  class="do-table-last">操作</th>
                        </tr>
                  </thead>
                  <tbody>
                        <tr>
                              <td>
                                    话术一
                              </td>
                              <td class="do-table-right">
                                    <a href="javascript:;" class="do-table-btn">编辑</a>
                                    <a href="javascript:;" class="do-table-btn">删除</a>
                              </td>
                        </tr>
                  </tbody>
            </table>

            <h2>页码</h2>
            <hr />
            <ul class="do-pagination">
                  <li>
                        <a href="javascript:;" aria-label="Previous">&laquo;</a>
                  </li>
                  <li>
                        <a href="javascript:;">1</a>
                  </li>
                  <li>
                        <a href="javascript:;">2</a>
                  </li>
                  <li>
                        <a href="javascript:;">3</a>
                  </li>
                  <li>
                        <a href="javascript:;">4</a>
                  </li>
                  <li>
                        <a href="javascript:;" disabled>5</a>
                  </li>
                  <li>
                        <a href="javascript:;" aria-label="Next">&raquo;</a>
                  </li>
            </ul>

            <br / >

            <ul class="do-pagination">
                  <li class="disabled">
                        <a href="javascript:;">&laquo;</a>
                  </li>
                  <li>
                        <a href="javascript:;">1</a>
                  </li>
                  <li>
                        <a href="javascript:;">2</a>
                  </li>
                  <li class="active">
                        <a href="javascript:;">3</a>
                  </li>
                  <li>
                        <a href="javascript:;">4</a>
                  </li>
                  <li>
                        <a href="javascript:;" disabled>5</a>
                  </li>
                  <li>
                        <a href="javascript:;" aria-label="Next">&raquo;</a>
                  </li>
            </ul>

            <h2>右侧弹出</h2>
            <hr />

            <div class="do-panel-view" style="display:none;">
                  <div class="do-panel-view-header">
                        <h3 class="do-panel-view-title">选择医院</h3>
                        <a href="javascript:;" class="do-panel-view-close"></a>
                  </div>
                  <div class="do-panel-view-body"></div>
            </div>

            <h3>图标</h3>
            <hr />
            <p>
                  <div class="icon-alert" ></div>
                  提示
            </p>
            <p>
                  <div class="icon-close" ></div>
                  提示
            </p>
            <p>
                  <div class="icon-del" ></div>
                  提示
            </p>
            <p>
                  <div class="icon-drop-down" ></div>
                  提示
            </p>
            <p>
                  <div class="icon-drop" ></div>
                  提示
            </p>
            <p>
                  <div class="icon-edit-down" ></div>
                  提示
            </p>
            <p>
                  <div class="icon-edit" ></div>
                  提示
            </p>
            <p>
                  <div class="icon-img" ></div>
                  提示
            </p>
            <p>
                  <div class="icon-line" ></div>
                  提示
            </p>
            <p>
                  <div class="icon-look-down" ></div>
                  提示
            </p>
            <p>
                  <div class="icon-look" ></div>
                  提示
            </p>
            <p>
                  <div class="icon-msg-down" ></div>
                  提示
            </p>
            <p>
                  <div class="icon-msg" ></div>
                  提示
            </p>
            <p>
                  <div class="icon-return" ></div>
                  提示
            </p>
            <p>
                  <div class="icon-star-two" ></div>
                  提示
            </p>

            <p>
                  <div class="icon-star" ></div>
                  提示
            </p>
            <p>
                  <div class="icon-talk" ></div>
                  提示
            </p>

            <p>
                  <i class="fa fa-angle-right"></i>
            </p>

</body>
      </html>